<#include "/admin/public.html">
<style type="text/css">
.layui-form-checkbox[lay-skin=primary] {
   height: 30px !important;
   line-height: 28px!important;
}
#uploadfile .filename{
	display:inline-block;
	width:180px;
}
</style>
<div class="uk-layui-form">
    <form class="layui-form uk-form" action="/admin/microcase/update.html"  method="post">
    	
    	<input type="hidden" name="id" id="id" value="${microcaseData.id!''}">
        <input type="hidden" name="parts" id="parts" value="${microcaseData.parts!''}">
        <input type="hidden" name="creater" id="creater" value="${microcaseData.creater!''}">
    	<input type="hidden" name="official" id="official" value="${microcaseData.official!''}">
    	<input type="hidden" name="auditstatus" id="auditstatus" value="${microcaseData.auditstatus!''}">
        <input type="hidden" name="releasetime" class="layui-input" id="releasetime" value="${microcaseData.releasetime!''}">
        <input type="hidden" name="microcaseenclosureList">
        
        <input type="hidden" name="essencecase" value="${list.essencecase!''}">
        <input type="hidden" name="filelogo" id="filelogo" value="${microcaseData.filelogo!''}">
        <input type="hidden" name="filelogourl" id="filelogourl" value="${microcaseData.filelogourl!''}">
        
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="title" lay-verify="required|max81" class="layui-input" placeholder="请输入标题" value="${microcaseData.title!''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <input type="text" name="author" id="author"  lay-verify="required" class="layui-input" placeholder="请输入作者" value="${microcaseData.author!''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="text" name="price" id="price" lay-verify="required|price" class="layui-input" placeholder="请输入价格" value="${microcaseData.price?string('0.00')}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配件</label>
            <div class="layui-input-block">
            	<#if dictList?? && dictList??>
				<#list dictList as parts>
					 <input type="checkbox" lay-verify="mountings" class="mountings ${parts.id!''}" title="${parts.label!''}" value="${parts.id!''}" lay-skin="primary" >
				</#list>
				</#if>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">案例等级</label>
            <div class="layui-input-inline">
            	<select name="gradedescribe" id="gradedescribe" placeholder="请选择案例等级"  lay-verify="required" >
                	<option value="">请选择案例等级</option>
					<#if dictgread?? && dictgread??>
						<#list dictgread as dic>
							<option value="${dic.id!''}" <#if microcaseData.gradedescribe == dic.id>selected</#if>>${dic.label!''}</option>
						</#list>
					</#if>
				</select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布时间</label>
            <div class="layui-input-inline">
            	<input type="text" class="layui-input"  lay-verify="required"  id="time" value="${microcaseData.releasetime!?string("yyyy-MM-dd")}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">正文</label>
            <div class="layui-input-block">
            	<textarea id="describecontent" name="describecontent"  lay-verify="content"  placeholder="请输入正文"  style="height: 260px;">${microcaseData.describecontent!''}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述图</label>
            <div class="layui-input-inline">
		      	<a class="layui-btn layui-btn-primary" id="desImgBtn"><i class="layui-icon">&#xe608;</i>上传图片</a>
		    </div>
        </div>
        <div class="layui-form-item  <#if microcaseData.filelogourl == "">layui-hide</#if>"">
		    <label class="layui-form-label"></label>
		    <div class="layui-input-inline">
		    	<img id="desImg" style="width:130px" <#if microcaseData.filelogourl != "">src="/${microcaseData.filelogourl!''}"</#if><#if microcaseData.filelogourl == "">src=""</#if>>
		    </div>
	    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">附件上传</label>
            <div class="layui-input-inline"  style="width:250px;">
		      	<a class="layui-btn layui-btn-primary" id="upload"><i class="layui-icon">&#xe608;</i>添加附件</a>
                <p style="color:red;">请上传详细案例和配套代码(最多5个)</p>
		    </div>
		    <div class="layui-form-mid layui-word-aux">
		    	<ul id="uploadfile">
		    		<#if microenclosureList??>
						<#list microenclosureList as list>
							<li id="${list.id!''}">
				    			<span class="filename layui-elip">${list.enclosurename!''}</span>
				    			<a href="#" class="delete"><i class="layui-icon" style="font-size: 18px; color: #1E9FFF;">&#x1006;</i></a>
				    		</li>
						</#list>
					</#if>
		    	</ul>
		    </div>
        </div>
        <#if user.usertype?? && user.usertype == "0">
	  		<div class="layui-form-item">
	            <label class="layui-form-label">是否为精华</label>
	            <div class="layui-input-inline">
			    	<input type="checkbox" name="essencecaseshow" title="精华" <#if microcaseData.essencecase==1>checked</#if> value="${list.essencecase!''}">
			    </div>
	        </div>
	  	</#if>
        <div class="layui-form-button">
            <div class="layui-button-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>

var url = "/uploadmicrocasetwo", layedit,microcaseenclosureList = [],urlImg = "/uploadmicrocase";

<#list microenclosureList as list>
microcaseenclosureList.push({"id":"${list.id!''}","enclosurename":"${list.enclosurename!''}","enclosureurl":"${list.enclosureurl!''}","filesize":"${list.filesize!''}"});
</#list>
$("input[name=microcaseenclosureList]").val(microcaseenclosureList);
var filesLength = microcaseenclosureList.length;	
$(".delete").click(function() {
	var id = $(this).parent().attr('id');
	$.each(microcaseenclosureList,function(index,item) {
		if(item) {
			if(id == item.id) {
				microcaseenclosureList.splice(index,1);
				filesLength--;
			}
		}
	})
	console.log("删除",microcaseenclosureList)
	$("#" + id).remove();
});
	
layui.use(['form','laydate','layedit'], function() {
    var form = layui.form();
    var laydate = layui.laydate;
    layedit = layui.layedit;
    var partsAry = $("#parts").val().split(",");
    if($("#parts").val() !=  '' ){
    	$.each(partsAry,function(index,item){
        	$("."+item).attr("checked",true);
        });
    }
    $("#releasetime").val( new Date($("#releasetime").val()));

    
   var start = {
       istoday: true
       ,choose: function(dates){ //选择好日期的回调
     	  $("#releasetime").val(new Date(dates));
       }
    };
    
    $("#time").click(function(){
    	start.elem = this;
        laydate(start);
    })
    
    form.render(); //更新全部
    
    form.verify({
    	max81:function(value,item){
    		if(value.replace(/[^\u0000-\u00ff]/g,"***").length > 78){
    			return '标题过长！';
    		}
    	},
    	price: function(value, item){ 
	      	if(value < 0) {
	  	       return '案例价格不能小于0';
	  	     }else{
	  	    	if(value === "" || value ==null){
	  	    		return '请输入数字';
	  	        }else if(isNaN(value)){
		  	        return '请输入数字';
		  	    }
	  	    }
  	    },
        content: function(value, item){ 
        	value = ue.getContent();
	      	if(value.length <= 0) {
	  	      return '请输入正文';
	  	     }
	  	  },
	  	mountings: function(value, item){ 
	  		var isEmptypartsVal = [];
		 	$('.mountings:checked').each(function() {
		 		isEmptypartsVal.push($(this).val());
		    });  
	      	if(isEmptypartsVal.length <= 0) {
	  	      return '请选择配件';
	  	     }
	  	  }
  	});   
   //提交
   form.on('submit(formDemo)', function(data){
	   var partsVal = [];
	 	$('.mountings:checked').each(function() {
	 		partsVal.push($(this).val());
	     });  
	 	$("#parts").val(partsVal.join());
	 	$("input[name=microcaseenclosureList]").val(JSON.stringify(microcaseenclosureList));
		if( !$("input[name=essencecaseshow]").prop("checked") ){
		  $("input[name=essencecase]").val("0");
	    }else{
		  $("input[name=essencecase]").val("1");
	    }
   }); 
});

var ue = UE.getEditor('describecontent',{
	//这里可以选择自己需要的工具按钮名称
	toolbars: [
		['Source','|', 'undo', 'redo', 'removeformat', 'backcolor', 'formatmatch','|', 'italic', 'underline', 'Bold', 'test',
			'forecolor','|', 'justifyleft', 'justifycenter', 'justifyright','|','insertorderedlist' ,'|',
			'fontfamily', 'fontsize','|',
			 'simpleupload','emotion'
		]
	],
	wordCount: false,					//开启字数统计
	elementPathEnabled : false
});

//上传描述图
//实例化一个plupload上传对象
var uploaderImg = new plupload.Uploader({
	browse_button:'desImgBtn', //触发文件选择对话框的按钮，为那个元素id
  url: "${base}" + urlImg, //服务器端的上传页面地址
  flash_swf_url: '${ctxStatic}/plupload/js//Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
  silverlight_xap_url: '${ctxStatic}/plupload/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
  filters: {
      mime_types: [{
              title: "Image files",
              extensions: "jpg,jpeg,png,gif"
          },

      ],
      max_file_size: '40mb',
      prevent_duplicates: "true" //不允许选取重复文件
  },
});
//在实例对象上调用init()方法进行初始化
uploaderImg.init();
//绑定各种事件，并在事件监听函数中做你想做的事
uploaderImg.bind('FilesAdded',function(uploader,files){
	if(uploaderImg.settings.browse_button[0].id == "desImgBtn"){
		$("#desImg").parent().parent().removeClass("layui-hide");
		$("#desImg").attr("src","/images/loading-slide.gif");
	}
	
	uploaderImg.start()
});
//上传后回调
uploaderImg.bind('FileUploaded', function(uploader, UploadProgress, responseObject) {
	 var obj = $.parseJSON(responseObject.response);
	 if(uploader.settings.browse_button[0].id == "desImgBtn"){
		$("#desImg").attr("src","/" + obj.filePath);
		$("#filelogourl").val(obj.filePath);
		$("#filelogo").val(obj.fileName.split(".")[0]);
	}
});
//报错
uploaderImg.bind('Error', function(up, err) {
  if (err.code == '-600') {
  	layer.msg('文件最多可上传40M', {icon: 5});
  }
});
    
    
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
	browse_button:"upload", //触发文件选择对话框的按钮，为那个元素id
    url: "${base}" + url, //服务器端的上传页面地址
    flash_swf_url: '${ctxStatic}/plupload/js//Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
    silverlight_xap_url: '${ctxStatic}/plupload/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
    filters: {
        mime_types: [],//默认空数组不做限制
        max_file_size: '40mb',
        prevent_duplicates: "true" //不允许选取重复文件
    },
});
//在实例对象上调用init()方法进行初始化
uploader.init();
//绑定各种事件，并在事件监听函数中做你想做的事
 uploader.bind('FilesAdded',function(uploader,files){
	 
	var number = 5-filesLength;
	if(uploader.files.length > number){ // 最多上传5个附件
        uploader.splice(number,999);
        layer.msg('最多上传5个附件！', {icon: 1})
    }
	console.log(uploader.files)
	$.each(files ,function(index,item){
		if($("#uploadfile li").length <= 4){ 
			var $li = '<li id="li-' + item.id + '">' +
		     			 '<span class="filename layui-elip">' + item.name + '</span>'+
						  '<a href="#" class="deletefile" id="' + item.id + '"><i class="layui-icon" style="font-size: 18px; color: #1E9FFF;">&#x1006;</i></a>' +
					  '</li>';
			$('#uploadfile').append($li);		
		}
	})
 	 		//上传后删除事件
 		$(".deletefile").click(function() {
 			var id = $(this).attr('id');
 			uploader.removeFile(id)
 			$.each(microcaseenclosureList,function(index,item) {
 				if(item) {
 					if(id == item.deleteId) {
 						microcaseenclosureList.splice(index,1);
 					}
 				}
 			})
 			$("#li-" + id).remove();
 		});
     uploader.start()
 });
//上传后回调
 uploader.bind('FileUploaded', function(uploader, UploadProgress, responseObject) {
 	var obj = $.parseJSON(responseObject.response);
 	var json = {};
 	json.enclosurename = obj.fileName;
 	json.enclosureurl = obj.filePath;
 	json.id = obj.fileId;
 	json.deleteId = UploadProgress.id;
 	json.filesize = Math.ceil(UploadProgress.origSize / 1024);
 	
 	microcaseenclosureList.push(json);
 });
//报错
 uploader.bind('Error', function(up, err) {
     if (err.code == '-600') {
     	layer.msg('文件最多可上传40M', {icon: 5});
     }else if (err.code == '-602'){
   	  layer.msg('文件重复！', {icon: 5});
     }	
	 console.log(err)
 })


</script>